<template>
  <div class="count-panel-container">
    <el-col>
      <div class="count-content-header">
        <div class="count-model" style="width:100px;padding-left: 30px;">总统计：</div>
        <div class="count-model">点击次数（日）：{{ clickInfo.daySum }}</div>
        <div class="count-model">点击次数（周）：{{ clickInfo.weekSum }}</div>
        <div class="count-model">点击次数（月）：{{ clickInfo.monthSum }}</div>
      </div>
      <div class="count-content-main">
        <el-main class="leftMain">
          <bs-tree
            ref="asyncTree"
            :default-props="defaultProps"
            :default-checked-keys="defaultCheckedKeys"
            :default-expanded-keys="defaultExpandedKeys"
            :show-checkbox="false"
            :draggable="false"
            :filter-visible="false"
            :context-menu-visible="false"
            :context-menu-data="contextMenuData"
            :data="treeData"
            :highlight-current="true"
            @node-click="handleTreeNodeClick"
          ></bs-tree>
        </el-main>
        <el-main class="rightMain">
          <bs-main class="bs-main">
            <div class="opration">
              <div class="oprationLeft">所属城市：{{ nameData.cityName }}     所属区县：{{ nameData.countyName }} </div>
              <div class="oprationRight">
                  <el-form :inline="true" size="small" :model="queryData">
                    <el-form-item>
                      <el-select
                        v-model="queryData.queryType"
                        :placeholder="$t('全部选项')"
                        clearable
                        style="width: 100px"
                        @clear="doClearQuery"
                      >
                        <el-option
                          v-for="(item, index) in searchItemData"
                          :key="index"
                          :label="$t(item.name)"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>


                <el-form-item>
                <el-input :placeholder="$t('请输入关键词搜索')" v-model="queryData.queryParam" clearable style="width:160px;margin-right:10px">
                    <template slot="prepend"><i class="iconfont icon-sousuo" /></template>
                </el-input>
                </el-form-item>
                <el-form-item>
                  <!-- <bs-search-button-icon @click.native="handleSearch"></bs-search-button-icon> -->
                  <bs-search-button-icon
                    @click.native="doList"
                  ></bs-search-button-icon>
                </el-form-item>
                </el-form>
              </div>
            </div>
            <list
              ref="rightTable"
              class="right"
              table-tag="newsCountTable"
              :list-data="tableData"
              :has-select="false"
              :list-cols="columns"
              :action-opts="actionOpts"
              :init-cols-props.sync="initColsProps"
              :init-headmune-flag="initHeadmuneFlag"
              height="calc(100vh - 400px)"
              @init-table="initTable"
              @sort="handleSort"
              
            >
            <!-- -->

              <template slot="actionSlot" slot-scope="{ row }">
              <el-button type="primary" size="small" @click.native="handleEditClick(row)">查看详情</el-button>
            </template>
           

                   <template slot="onlineSlot" slot-scope="{ row }">
            {{ row.online | onlineFilter(te) }}
          </template>

            </list>
            <pagination
              :total="pageData.total"
              :page="pageData.page"
              :limit="pageData.limit"
              @pagination="doList"
            ></pagination>
          </bs-main>
        </el-main>
        <click-statistics-dialog></click-statistics-dialog>
      </div>
    </el-col>
  </div>
</template>
<script>
import ClickStatisticsDialog from "./ClickStatisticsDialog"
import List from '@/components/List'
import Pagination from '@/components/Pagination'
import SystemApi from '@/api/system'
import DeviceMonitorApi from '@/api/device'

export default {
  name: 'CountPanel',
  components: {  List, Pagination,ClickStatisticsDialog },
  data() {
    const headerContextMenus = {
      width: '120px',
      items: ['sortUp', 'sortDown', 'line', 'cols'],
    }
    return {
      treeNodeData: {},
      queryData: { queryType:0, allSize: false },
      currentNode: {},
      clickInfo: {},
      nameData:{
          cityName: "",
          county: "",
      },
      activeName: 'first',
      //树的数据
      defaultProps: {
        id: 'id',
        label: 'name',
        owner: 'owner',
        isLeaf: 'hasChild',
      },
      searchItemData: [
        { name: '全部选项', value: 0 },
        { name: '终端名称', value: 1 },
        { name: 'MAC地址', value: 2 },
      ],
      treeData: [],
      defaultTreeData: {},
      defaultCheckedKeys: [],
      defaultExpandedKeys: [0],
      contextMenuData: [],
      //表格的数据
      pageData: {
        page: 1,
        total: 0,
        limit: 15,
      },
      tableData: [],
      initHeadmuneFlag: false,
      actionOpts: {
        show: true,
        align: 'center',
        width: '120px',
        hidEditBtn: true,
        hidDelBtn: true,
        name: '操作',
        slot: true,
      },
      columns:[
        { label: '名称', prop: 'name', width: '125px',minwidth: '120', headerContextMenus },
        { label: '设备id', prop: 'mac', width: '125px',minwidth: '120', headerContextMenus },
        { label: '安装位置', prop: 'location', width: '125px',minwidth: '120', headerContextMenus },
        {
          label: '状态',
          prop: 'online',
          minwidth: '70',
          headerContextMenus,
        },
        { label: '点击量（日）', prop: 'daySum', width: '125px',minwidth: '120', headerContextMenus },
        { label: '点击量（周）', prop: 'weekSum', width: '125px',minwidth: '120', headerContextMenus },
        { label: '点击量（月）', prop: 'monthSum', width: '125px',minwidth: '120', headerContextMenus },
      ],
      initColsProps: ['name','mac','location','online','daySum','weekSum','monthSum'],
    }
  },
  created() {
    this.$eventBus.$on('getTreeNode', this.doClickTree)
    this.$eventBus.$on('doList', this.doList)
  },
  beforeDestroy() {
    this.$eventBus.$off('getTreeNode')
    this.$eventBus.$off('doList')
  },
  mounted() {
    this.$nextTick(() => {
      this.getStatisticsInfo()
      this.loadTreeData()
      this.doList()
    })
  },
  filters: {
    onlineFilter(val,te) {
      if (val == 1) {
        return te('在线')
      } else if(val == 2) {
        return te('待机')
      } else {
        return te('离线')
      }
    },
  },
  methods: {
    initTable() {
      this.initHeadmuneFlag = true
    },
    async getStatisticsInfo() {
      const res = await DeviceMonitorApi.newsClickStatistics()
      if (res) {
        this.clickInfo = {
          daySum: res.daySum,
          weekSum: res.weekSum,
          monthSum: res.monthSum,
        }
      }
    },  
    //终端分组树
    loadTreeData() {
      this.treeData = [
        {
          id: 0,
          name: '山西省',
          type: 1,
          children: [],
        },
      ]
      this.treeNodeData = this.treeData[0]
      let params = { type: this.showMinType }
      this.$store.dispatch('device/doLoadTree', params).then((res) => {
        if (res) {
          res.forEach((item) => {
            this.treeData[0].children.push(item)
          })
        }
      })
    },
    handleTreeNodeClick(data, node, obj) {
        this.treeNodeData = data
        this.currentNode = node
        if(data.id>0){
              
            if(data.children!=undefined){
              this.nameData.cityName = data.name
            }else if(data.children===undefined && this.nameData.cityName!=''){alert(data.name)
              this.nameData.countyName = data.name
            }else if(data.children===undefined && this.nameData.cityName==''){
              this.nameData.cityName = data.name
            }
        }

        if (this.activeName == 'first') {
          if (data.type == 1) {
            delete this.queryData.mac
            this.queryData.groupId = data.id == 0 ? -2 : data.id
          } else {
            delete this.queryData.groupId
            var reg = /\[(.*?)\]/
            if (reg.test(data.name)) {
              this.queryData.mac = data.name.match(reg)[1].replace(/[-]/g, '')
            }
          }
        } else { 
          delete this.queryData.mac
          delete this.queryData.groupId
          this.queryData.tagId = data.id == 0 ? -2 : data.id
        }
        

        this.queryData.page = 1
        this.$eventBus.$emit('doList', this.queryData) 
    },
    // 查询列表
    async doList(current) {
      if (current) {
        this.pageData = {
          ...this.pageData,
          ...current,
        }
      }
      this.allSize = false
      var queryData = this.$data.queryData
      queryData.current = this.pageData.page
      queryData.size = this.pageData.limit
      // if(queryData.groupId == 0)
      // {
      //   delete queryData.groupId
      // }

      this.$store.dispatch('device/doTerminalClickList', queryData).then((res) => {
        if (res) {
          this.tableData = res.records ? res.records : []
          this.pageData.total = Number(res.total ? res.total : 0)
        }
      })
    },
    // 点击清除下拉选择条件
    doClearQuery() {
      // this.queryData.queryType = 0
      // this.queryData.queryParam = ''
      this.$set(this.queryData, 'queryType', 0)
      this.$set(this.queryData, 'queryParam', '')
    },
    // 查看详情
    handleEditClick(row) {
      this.$eventBus.$emit('clickStatisticsDialogShow', row.mac)
    },
    handleSort(sortInfo) {
      
    },
    handleSearch() {

    }
  },
}
</script>

<style lang="scss" scoped>
// import '@/styles/bs-common.scss';
.count-panel-container {
  padding: 20px 0px;
}
.count-content-header {
  height: 80px;
  padding: 0px 10px;
  display: flex;
  .count-model {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 450px;
    min-width: 250px;
    height: 50px;
    line-height: 50px;
    background-color: #e3e3e3;
  }
}

.count-content-main {
  display: flex;
  ::v-deep .bs-main-layout__footer {
    border-top: 0px solid #e9e9e9;
  }
  .left-content-main {
    display: flex;
    width: 200px;
    flex-direction: column;
  }
  .right-content-main {
    display: flex;
    flex-direction: column;
  }
}
.opration {
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  color: red;
}
</style>